<template>
  <div class="component" :ref="dragPreview">
    <div class="icon">
      <i :class="`iconfont ${props.component.icon}`"></i>
    </div>
    <div class="label">
      {{ props.component.label }}
    </div>

  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import { useLowCodeStore } from "@/stores";

import { useDrag } from 'vue3-dnd'

const props = defineProps<{
  component: { icon: string, label: string, type: string },
}>()

const [, dragPreview] = useDrag({
  type:props.component.type,
  item: { ...props.component },
  collect: (monitor) => ({ isDragging: monitor.isDragging() })
})


</script>

<style scoped lang="less">
  .component {
    width: 33.3333%;
    height: 100px;
    transition: all .3s linear;
    padding: 20px 10px;
    border: 1px solid #eeeff3;
    text-align: center;
    cursor: pointer;
    .icon {
      width: 100%;
      i {
        font-size: 30px;
      }
    }
    .label {
      width: 100%;
      margin-top: 15px;
      font-size: 13px;
    }
  }
  .component:hover {
    box-shadow: 4px 20px 40px 5px rgba(0, 0, 0, .1);
    color: var(--vt-c-hover);
   }
</style>
